<template>
  <el-dialog title="设备详情" :close-on-click-modal="false" append-to-body :visible.sync="visible" lock-scroll
    width="800px">
    <div>
      <el-row :gutter="24">
        <el-table :data="facilityOptions" style="width: 100%">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="设备名称" prop="deviceName"></el-table-column>
          <el-table-column label="已完成" prop="complete" align="center"></el-table-column>
          <el-table-column label="未完成" prop="total">
            <template slot-scope="scope">
              {{ scope.row.total - scope.row.complete }}
            </template>
          </el-table-column>
          <el-table-column label="是否合格" prop="passStatus">
            <template slot-scope="scope">
              {{ scope.row.passStatus == 2 ? '不合格' : '合格' }}
            </template>
          </el-table-column>
          <el-table-column label="一级消防注册工程师" prop="engineerName"></el-table-column>
          <el-table-column label="中级消防设施操作员" prop="operatorName"></el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-row>
    </div>

  </el-dialog>
</template>
<script>
import { getBuildingFloorList, getDeviceTree, updateBuildFloor } from "@/api/system/building";
import { getDevicePlanTaskList } from "@/api/plan-produce/task";
export default {
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,
      dataForm: {},
      facilityOptions: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    init(list, queryParams) {
      this.dataForm.id = list.floorId || 0;
      this.dataForm = { ...queryParams, ...list, ...this.queryParams }
      this.visible = true;
      this.$nextTick(() => {
        this.loading = true;
        getDevicePlanTaskList({ ...queryParams, ...list }).then((res) => {
          this.facilityOptions = res.rows;
          this.total = res.total
          this.loading = false;
        });
      });
    },
    getList() {
      getDevicePlanTaskList({ ...this.dataForm, ...this.queryParams }).then((res) => {
        this.facilityOptions = res.rows;
        this.total = res.total
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.topSty {
  width: 98%;
  margin-bottom: 20px;
  display: flex;
  // justify-content: flex-end;
}
</style>
